<template>
  <section class="container">
    <div>
      <el-container>
        <!-- <el-aside width="200px">Aside</el-aside> -->
        <el-container>
          <!-- header -->
          <Header
            @child-islogin="islogin"
            @child-register="register"
            @child-login="login"/>
          <!-- con -->
          <div style="text-align:center;margin-top:2rem;">
            <!-- <p>首页</p>
            <p>首页</p>
            <p>首页</p> -->
          </div>
          <el-main>
            <div 
              class="tab">
              <div
                :class="{choose: tabA === 'a'}"
                class="tab1" 
                @click="chooseTab('a')">网站推荐</div>
              <!-- <div
                v-if="!user"
                :class="{choose: tabA === 'c'}"
                class="tab2"
                @click="chooseTab('c')">定制{{ '(需登录)' }}</div> -->
              <div
                :class="{choose: tabA === 'c'}"
                class="tab2"
                @click="chooseTab('c')">定制收藏</div>
              <div
                :class="{choose: tabA === 'b'}"
                class="tab2"
                @click="chooseTab('b')">最近浏览</div>
            </div>

            <br><br>

            <el-row
              v-if="tabA === 'a'"
              :gutter="5"
              class="site"
              style="margin-left: 0;margin-right: 0;"
              justify="space-between">

              <el-col
                v-for="(item, index) in siteList"
                :index="index"
                :key="item.index"
                :xs="12"
                :sm="6"
                :lg="4"
                :xl="3"
                :span="6">
                <div class="grid-content bg-purple">
                  <a 
                    :href="item.url"
                    target="_blank"
                    @click="openurl(item)">
                    <el-button
                      style="width:100%;"
                      size="small">
                      {{ item.name }}
                      <p class="url">{{ item.description }}</p>
                      <el-rate
                        v-model="item.score"
                        disabled
                        show-score
                        text-color="#ff9900" 
                        score-template="{ value }"/>
                    </el-button>
                  </a>
                </div>
                <br>
              </el-col>

            </el-row>
            <!-- 历史 -->
            <el-row
              v-if="tabA === 'b'"
              :gutter="5"
              class="site"
              style="margin-left: 0;margin-right: 0;"
              justify="space-between">

              <el-col
                v-for="(item, index) in historyList"
                :index="index"
                :key="item.index"
                :xs="12"
                :sm="6"
                :lg="4"
                :xl="3"
                :span="6">
                <div class="grid-content bg-purple">
                  <a 
                    :href="item.url"
                    target="_blank">
                    <el-button
                      style="width:100%;"
                      size="small">
                      {{ item.name }}
                      <p class="url">{{ item.description }}</p>
                      <el-rate
                        v-model="item.score"
                        disabled
                        show-score
                        text-color="#ff9900" 
                        score-template="{ value }"/>
                    </el-button>
                  </a>
                </div>
                <br>
              </el-col>

            </el-row>
            <!-- 定制登录后 -->
            <el-row
              v-if="tabA === 'c' && user"
              :gutter="5"
              class="site"
              style="margin-left: 0;margin-right: 0;"
              justify="space-between">
              <div class="switch">
                <el-switch
                  v-model="custom"
                  active-text="定制"
                  @change="change" />
              </div>
              <div 
                v-if="!custom"
                style="width:100%;">
                <el-col
                  v-for="(item, index) in middleList"
                  :index="index"
                  :key="item.index"
                  :xs="12"
                  :sm="6"
                  :lg="4"
                  :xl="3"
                  :span="6">
                  <div class="grid-content bg-purple">
                    <a 
                      :href="item.url"
                      target="_blank">
                      <el-button
                        style="width:100%;"
                        size="small">
                        {{ item.name }}
                        <p class="url">{{ item.description }}</p>
                        <el-rate
                          v-model="item.score"
                          disabled
                          show-score
                          text-color="#ff9900" 
                          score-template="{ value }"/>
                      </el-button>
                    </a>
                  </div>
                  <br>
                </el-col>
              </div>
 
              <div 
                v-else
                style="width:100%;">
                <div style="text-align:center;">
                  <el-button @click="saveSite">保存</el-button>
                  <!-- <el-button>还原</el-button> -->
                </div>
                <br>
                <el-col
                  v-for="(item, index) in middleList"
                  :index="index"
                  :key="item.index"
                  :span="24">
                  <div class="grid-content bg-purple">
                    <div 
                      target="_blank">
                      <el-button
                        style="width:100%;text-align:center;background-color:#F2F6FC"
                        size="small">
                        <!-- @click="save(item)" -->
                        <p>
                          <el-input
                            v-model="middleList[index].name"
                            placeholder="修改名称" />
                        </p>
                        <br>
                        <p>
                          <el-input
                            v-model="middleList[index].url"
                            placeholder="修改地址" />
                        </p>
                        <br>
                        <p>
                          <el-input
                            v-model="middleList[index].description"
                            placeholder="修改描述" />
                        </p>
                        <br>
                        <!-- <p class="url">{{ item.description }}</p> -->
                        <!-- <el-rate
                          v-model="item.score"
                          disabled
                          show-score
                          text-color="#ff9900" 
                          score-template="{ value }"/> -->
                        <div class="block">
                          <el-slider
                            v-model="middleList[index].score"
                            :max="5" 
                            show-input />
                        </div>
                      </el-button>
                    </div>
                  </div>
                  <br>
                </el-col>
              </div>

            </el-row>
            <!-- 未登录 -->
            <el-row
              v-else-if="tabA === 'c' && !user"
              :gutter="5"
              class="site"
              style="margin-top: 5rem;margin-left: 0;margin-right: 0;text-align:center;"
              justify="space-between">

              [<nuxt-link to="/login">需登录</nuxt-link>]
            </el-row>
            
          </el-main>
          <!-- foot -->
          <Footer/>
          <el-footer />
        </el-container>
      </el-container>
    </div>
  </section>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'

export default {
  components: {
    Header, Footer
  },
  data() {
    return {
      middleList: [],
      customList: [],
      modify: false,
      custom: false,
      // tab
      // islogin: false,
      user: '',
      tabA: 'a',
      list: 'a',
      activeIndex: '1',
      historyList: [],
      history: [],
      siteList: [{'name': '百度', 'url': 'https://www.baidu.com', 'description': '百度中文搜索引擎', 'score': 4.2},
                 {'name': '必应', 'url': 'https://cn.bing.com', 'description': '微软新一代搜索引擎', 'score': 3.9},
                 {'name': '腾讯天气', 'url': 'https://tianqi.qq.com', 'description': '全国天气', 'score': 4.3},
                 {'name': '百度地图', 'url': 'https://map.baidu.com', 'description': '百度地图导航', 'score': 5.0},
                 {'name': '高德地图', 'url': 'https://www.amap.com', 'description': '高德地图导航', 'score': 5.0},
                 {'name': '谷歌', 'url': 'https://www.google.com', 'description': '谷歌国际搜索引擎', 'score': 4.5},
                 {'name': '维基百科', 'url': 'https://en.wikipedia.org', 'description': '准确中立的百科全书', 'score': 4.7},
                 {'name': '淘宝', 'url': 'https://www.taobao.com', 'description': '淘宝网购零售平台', 'score': 5.0},
                 {'name': '京东', 'url': 'https://www.jd.com', 'description': '中国自营式电商平台', 'score': 4.8},
                 {'name': '天猫', 'url': 'https://www.tmall.com', 'description': '淘宝plus', 'score': 3.7},
                 {'name': '阿里巴巴', 'url': 'https://www.1688.com', 'description': '阿里采购批发平台', 'score': 3.5},
                 {'name': '百度贴吧', 'url': 'https://tieba.baidu.com', 'description': '百度贴吧', 'score': 4.0},
                 {'name': '12306', 'url': 'https://www.12306.cn', 'description': '中国铁路服务中心', 'score': 4.1},
                 {'name': '新浪', 'url': 'https://www.sina.com.cn', 'description': '网络媒体', 'score': 3.3},
                 {'name': '58', 'url': 'https://58.com', 'description': '分类信息网', 'score': 2.8},
                 {'name': '携程', 'url': 'https://www.ctrip.com', 'description': '在线票务服务', 'score': 3.8},
                 {'name': '优酷', 'url': 'https://www.youku.com/', 'description': '优酷视频平台', 'score': 3.6},
                 {'name': '腾讯视频', 'url': 'https://v.qq.com/', 'description': '腾讯视频平台', 'score': 3.4},
                 {'name': '爱奇艺', 'url': 'https://www.iqiyi.com/', 'description': '爱奇艺视频平台', 'score': 2.9},
                 {'name': '虎牙', 'url': 'https://www.huya.com/', 'description': '虎牙直播平台', 'score': 4.2},
                 {'name': '斗鱼', 'url': 'https://www.douyu.com', 'description': '斗鱼直播平台', 'score': 4.2},
                 {'name': 'youtube', 'url': 'https://www.youtube.com', 'description': '谷歌视频平台', 'score': 4.8},
                 {'name': 'twitch', 'url': 'https://www.twitch.tv', 'description': 'twitch直播平台', 'score': 4.8},
                 {'name': 'G5', 'url': 'https://zh-cn.socialclub.rockstargames.com', 'description': '- - -', 'score': 4.0}
                ]
    }
  },
  created() {
    // console.log('11111111')
    // console.log('11111111', this.user)
  },
  mounted() {
    this.middleList = this.siteList

    this.getSite()
    // this.islogin()
    // console.log('222222',)
    setTimeout(()=>{
      this.open()
    },1500)
    // window.open('https://www.baidu.com/', '_blank');
    // window.alert('123132')
  },
  // beforeDestroy() {
  //   console.log('sdfsdfsf')
  //   window.alert('123132')
  // },
  methods: {
    // 读取收藏夹
    getSite() {
      this.$axios.get('/website/siteList').then(({status,data})=>{
          if(status===200){
            if(data&&data.code === 1){
              console.log('this.middleList', data.data.favorite)
              this.middleList = data.data.favorite

              // setTimeout(()=>{
              //   this.$message.success('取出成功');
              // }, 2300)
            } else if(data&&data.code === 0) {
              this.middleList = data.data
            } else {
              // this.error=data.msg
              // this.$message.error(data.msg);
            }
          }else{
            this.error=`服务器出错`
          }
        })
    },
    // 保存收藏夹
    saveSite() {
      this.$axios.post('/website/creact',{
        favorite: this.middleList,
        }).then(({status,data})=>{
          if(status===200){
            if(data&&data.code === 0){
              this.$message.success('保存成功');
              // setTimeout(()=>{
              // }, 2300)
            }else{
              this.error=data.msg
              this.$message.error(data.msg);
            }
          }else{
            this.error=`服务器出错`
          }
        })
    },
    //滑块
    change() {
      // if (this.custom) {
      //   console.log(this.custom)
      // } else {
      //   console.log(this.custom)
      // }
    },
    // 自定义
    save(index) {
      console.log('index', index)
    },
    // 32条历史
    openurl(item) {
      if(JSON.parse(localStorage.getItem("history"))) {
        this.history = JSON.parse(localStorage.getItem("history"))
        if(this.history.length > 31) {
          this.history.pop()
        }
      }

      this.history.unshift(item)
      // console.log('this.history', this.history);

      localStorage.setItem("history", JSON.stringify(this.history))
    },
    // 注册
    register() {
      window.location.href='/register'
    },
    login() {
      window.location.href='/login'
    },
    islogin(x) {
      // console.log('x', x)
      this.user = x
      // console.log('this.user', this.user)
      // this.tabA = 'c'
    },
    // 通知
    open() {
        // this.$message('登录后提供智能导航及自定义导航功能');
    },
    // chooseTab
    chooseTab(x) {
      this.tabA = x;
      // 历史
      if(x === 'b') {
        if(JSON.parse(localStorage.getItem("history"))) {
          this.historyList = JSON.parse(localStorage.getItem("history"))
        }
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="scss">

.container {
  width: 100%;
  /* min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; */
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

.tab {
  color: #606266;
  font-size: 13px;
  padding: 0 15%;
  background-color: #fff;
  display: flex;
  height: 80px;
  line-height: 80px;
  div {
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 20px;
    flex: 1;
  }
  .choose {
    // background-color: #F4F4F4;
    border-bottom: 1px solid #a8d0f9;
    // color: #F56C6C;
    color: #409EFF;
    width: 20px;
    height: 80px;
    line-height: 80px;
  }
}
.el-main{
  padding: 0;
}
.site {
  // background-color: red;
  // margin-left: 2%;
  // margin-right: 2%;
  padding-left: 2%;
  padding-right: 2%;
  a:hover{ text-decoration:none;}
  a{ text-decoration:none;}
  margin-bottom: 10rem;
}
.url {
  line-height: 3rem;
  color: #C0C4CC;
  // color: #909399;
  font-size: 12px;
}
.switch {
  text-align: right;
  margin-bottom: 2rem;
}
</style>
